<template>
    <fieldset>
        <legend>setup钩子</legend>
        <!-- <h1>{{num}}</h1> -->
        <h2>{{ num2 }}</h2>
        <h3>{{ aa }}</h3>
        <h4>{{msg}}</h4>
    </fieldset>
</template>
<script>
import { toRefs,getCurrentInstance } from "vue"
export default {
    props: ['num'],
    //setup钩子是vue3新增的钩子,在beforeCreate和created之前执行
    //setup钩子不会因为Props的变化而重新调用
    //setup这个钩子的返回值是可以直接给模板使用的
    setup(props, context) {
        // console.log(props.num)
        // console.log(context)
        // let { num } = props;

        //使用es6语法解构Props会失去props响应式

        //使用toRefs来保持响应式

        let { num } = toRefs(props)

        // console.log(this)

        //在setup中可以获取组件实例,但是不要在setup中操作data

        // getCurrentInstance

        let proxy = getCurrentInstance().ctx;

        console.log(proxy)

        //输出插槽节点
        console.log(context.slots)

        var a = 30

        return {
            num2: num,
            aa: 999
        }
    },
    data() {
        return {
            msg: "ikun"
        }
    }
}
</script>